import { View, Text, Pressable, StyleSheet } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { NavigationContainer } from '@react-navigation/native'
import Search from '../page/search'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { AntDesign } from '@expo/vector-icons'
import Dashboard from '../page/dashboard'
import News from '../page/news'
import Info from '../page/info'
import User from '../page/user'

const TestView = () => <View><Text>test View</Text></View>

const Navigation = () => {
  return (
    <NavigationContainer>
        <RootStackNavigation />
    </NavigationContainer>
  )
}

// 第一层路由 == 栈导航器
const Stack = createNativeStackNavigator();
const RootStackNavigation = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Root" component={BottomTabNavigation} options={{
                headerShown: false,
            }} />
            <Stack.Screen name="Search" component={Search} />
        </Stack.Navigator>
    )
};

const BottomTab = createBottomTabNavigator();

const BottomTabNavigation = () => (
    <BottomTab.Navigator>
        <BottomTab.Screen name='Dashboard'
            component={Dashboard}
            options={({ navigation }) => ({
                title: "首页",
                tabBarIcon: ({ color }) => <AntDesign name='dashboard' size={24} color={color} />
            })} />
        <BottomTab.Screen name='News'
            component={News}
            options={({ navigation }) => ({
                title: "新闻",
                headerTitle: "搜索",
                headerRight: () => (
                    <Pressable onPress={() => navigation.navigate('Search')}>
                        <AntDesign  name='search1' size={18} style={styles.right_btn} />
                    </Pressable>
                ),
                tabBarIcon: ({ color }) => <AntDesign name='google' size={24} color={color} />
            })} />
        <BottomTab.Screen name='Info'
            component={Info}
            options={({ navigation }) => ({
                title: "信息",
                tabBarIcon: ({ color }) => <AntDesign name='profile' size={24} color={color} />
            })} />
        <BottomTab.Screen name='User'
            component={User}
            options={({ navigation }) => ({
                title: "我的",
                tabBarIcon: ({ color }) => <AntDesign name='user' size={24} color={color} />
            })} />
    </BottomTab.Navigator> 
)

const styles = StyleSheet.create({
    right_btn: {
        marginRight: 16
    }
})

export default Navigation;